<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:include="include :: header('模板示例')" />
		<th:block th:include="include::bootstrap-select-css"/>
	</head>
	<body>
		<body class="gray-bg">
			<div class="container-div">
				<div class="row">
					<div class="col-sm-12 search-collapse">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <select class="selectpicker" id="chooseTem">

                                    </select>
                                </li>
                            </ul>
                        </div>
					</div>
					<div class="col-sm-12 select-table table-striped">
						<div class="row">
							<div class="col-sm-4">
								<form class="form-horizontal m" id="json-form">
								<div id="json-div">

								</div>
									<a class="btn btn-primary btn-rounded btn-sm"
									   onclick="submit()"><i class="fa fa-search"></i>确定</a>
								</form>
							</div>
							<div class="col-sm-8">
								<iframe id="show-exm" style="border: none;width: 100%">
								</iframe>
							</div>
						</div>
					</div>
				</div>
			</div>
			<th:block th:include="include :: footer" />
			<th:block th:include="include::bootstrap-select-js"/>
		<script th:inline="javascript">
			var prefix = ctx + "system/template";
			//使用的模板id
			var indeId;
			function initForme(templateId) {
				$.get(prefix+"/getTemJson/"+templateId,function(data,status){
					$("#json-div").empty();
					$.each(JSON.parse(data.data),function(i,e){//i是索引，e是json对象
						if(e==null)
						{
							return;
						}
						//根据json生成表单
						var df=	'<div class="form-group">'+
								'<label class="col-sm-3 control-label is-required">'+e+'</label>'+
								'<div class="col-sm-8">'+
								'<input class="form-control" type="text" name="'+i+'" >'+
								'</div>'+
								'</div>';
						$("#json-div").append(df);
					});
				});
			}
			$("#chooseTem").selectpicker({ width: 'auto', liveSearch: true,liveSearchPlaceholder: "数据检索" });
			$.get(prefix+"/listTemNameId",function(data,status){
				$("#chooseTem").empty();
				$.each(data.data,function(i,e){//i是索引，e是json对象
					if(e==null)
					{
						return;
					}
				  var indexg=e.lastIndexOf("_"),lngy=e.length;
					$("#chooseTem").append("<option value="+e.substring(0,indexg) +">"+e.substring(indexg+1,lngy)+"</option>");
				});
			$("#chooseTem").selectpicker("refresh");
			indeId=$("#chooseTem").val();
			initForme(indeId);
			});
           //下拉框点击事件
			$("#chooseTem").on('changed.bs.select',function(e, clickedIndex, isSelected, previousValue){
				indeId=$(e.currentTarget[clickedIndex]).val();
				initForme(indeId);
			});


			function submit(){
				$("#show-exm").attr("src",prefix+"/example/"+indeId+"?"+$('#json-form').serialize());
			}
		</script>
</body>
</html>
